<template>
  <div class="skillgroup_node_edit">
    <div class="btn_box">
      <el-button type="primary" class="primary_btn" @click="saveEdit">{{$t('public.save')}}</el-button>
      <!--<el-button type="primary" class="primary_btn delete_btn" @click="deleteLi">{{$t('public.delete')}}</el-button>-->
    </div>
    <el-form :model="nodeObj" label-width="180px" ref="nodeObj" :rules="rules">
      <el-form-item class="form_li"  prop="name" :label="$t('configLazyLoad.process.nodeName')">
        <el-input v-model.trim="nodeObj.name" class="input_name_box"></el-input>
      </el-form-item>
      <el-form-item class="form_li"  prop="agentId" :label="$t('configLazyLoad.process.selectAgent')">
        <el-select v-model="nodeObj.agentId" :placeholder="$t('report.pleChoseAgent')">
          <el-option
            v-for="item in agentOptions"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="form_li"  prop="agentOfflineProcessTo" :label="$t('configLazyLoad.process.processLabel1')">
        <el-select v-model="nodeObj.agentOfflineProcessType" class="start_input" :placeholder="$t('configLazyLoad.process.processLabel2')">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="nodeObj.agentOfflineProcessTo" :placeholder="$t('configLazyLoad.process.processLabel3')">
          <el-option
            v-for="item in optionsOne"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="form_li"  prop="agentStatusCloseProcessTo" :label="$t('configLazyLoad.process.processLabel4')">
        <el-select v-model="nodeObj.agentStatusCloseProcessType" class="start_input" :placeholder="$t('configLazyLoad.process.processLabel2')">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="nodeObj.agentStatusCloseProcessTo" :placeholder="$t('configLazyLoad.process.processLabel3')">
          <el-option
            v-for="item in optionsOne"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="form_li"  prop="agentBusyProcessTo" :label="$t('configLazyLoad.process.processLabel5')">
        <el-select v-model="nodeObj.agentBusyProcessType" class="start_input" :placeholder="$t('configLazyLoad.process.processLabel2')">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="nodeObj.agentBusyProcessTo" :placeholder="$t('configLazyLoad.process.processLabel3')">
          <el-option
            v-for="item in optionsOne"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!--<div class="title">-->
      <!--座席在线时欢迎语：-->
    <!--</div>-->
    <affix :label="$t('configLazyLoad.process.processLabel6')"></affix>
    <welcomeMsg
      :welcomeRandom="activeChangeRandom"
      :usingMultiWelcomeMessage="nodeObj.usingMultiWelcomeMessage"
      :welcomeMessage="nodeObj.welcomeMessage"
      :welcomeMessages="nodeObj.welcomeMessages"
      @usingChange="usingChange"
      @messageChg="messageChg"
      @messageArrChg="messageArrChg"></welcomeMsg>
  </div>
</template>
<script>
  import welcomeMsg from '../../../base/webchatWelcomeMsg.vue'
  import affix from '@/components/ui-modules/affix/Affix.vue'
  import * as types from '@modules/config/channelConfig/webchatSchdule/mutation-types.js'

  export default{
    name: 'webchatAgentNodeEdit',
    data () {
      return {
        options: [
          {label: this.$t('configLazyLoad.process.node'), value: 'system'},
          {label: this.$t('configLazyLoad.process.node1'), value: 'entrance'},
          {label: this.$t('configLazyLoad.process.node3'), value: 'exten'},
          {label: this.$t('configLazyLoad.process.node4'), value: 'queue'},
          {label: this.$t('configLazyLoad.process.node7'), value: 'agent'},
          {label: this.$t('configLazyLoad.process.node8'), value: 'time'},
          {label: this.$t('configLazyLoad.process.node9'), value: 'robot'}
//          {label: '留言节点', value: 'leavemsg'}
        ],
        welcomeMsgEditShow: false,
        welcomeMsgEditIndex: 0,
        welcomeMsgEditType: '',
        optionsOne: [],
        agentOptions: [],
        editorConClone: '',
        rules: {
          name: [
            { required: true, message: this.$t('configLazyLoad.process.processLabel7'), trigger: 'blur' }
          ],
          agentId: [
            { required: true, message: this.$t('report.pleChoseAgent'), trigger: 'change' }
          ]
        }
      }
    },
    props: {
      nodeObj: {
        type: Object,
        default: function () {
          return {
            _id: '', // id
            account: '', // 账户id
            type: 'agent', // 节点类型
            name: '', // 节点名称
            agentName: '',   // 座席姓名
            agentId: '', // 座席id
            agentOfflineProcessType: 'system', // 座席不在线时流转类型
            agentOfflineProcessTo: '', // 座席不在线时流转节点id
            agentStatusCloseProcessType: 'system', // 座席领取开关关闭时流转类型
            agentStatusCloseProcessTo: '', // 座席领取开关关闭时流转节点id
            agentBusyProcessType: 'system', // 座席达到会话上限时流转节点类型
            agentBusyProcessTo: '', // 座席达到会话上限时流转节点id
            usingMultiWelcomeMessage: false, // 是否启用不同欢迎语，'1' - 启用，'0' - 不启用
            createTime: '', // 创建时间
            createUser: '', // 创建人
            updateTime: '', // 修改时间
            updateUser: '', // 修改人
            nextNodeIds: [''], // 流转节点id数组
            welcomeMessage: '', // 欢迎语
            welcomeMessages: [
              {
                content: String, // 欢迎语
                startTime: String, // 开始时间
                endTime: String // 结束时间
              }
            ]
          }
        }
      },
      random: Number,
      todoType: String,
      activeChangeRandom: Number
    },
    watch: {
      random () {
        this.resetForm()
      }
    },
    methods: {
      usingChange (data) {
        this.nodeObj.usingMultiWelcomeMessage = data
      },
      messageChg (data) {
        this.nodeObj.welcomeMessage = data
      },
      messageArrChg (data) {
        this.nodeObj.welcomeMessages = data
      },
      saveWelcomeMsg (data) {
        if (this.welcomeMsgEditType === 'li') {
          this.nodeObj.welcomeMessages[this.welcomeMsgEditIndex].content = this.editorConClone
          this.welcomeMsgEditShow = false
        } else {
          this.nodeObj.welcomeMessage = this.editorConClone
          this.welcomeMsgEditShow = false
        }
      },
      resetForm () {
        this.$refs['nodeObj'].resetFields()
      },
      addOne (index) {
        if (index === 0) {
          this.nodeObj.welcomeMessages.push({content: '', startTime: '', endTime: ''})
        } else {
          this.nodeObj.welcomeMessages.splice(index, 1)
          this.nodeObj.welcomeMessage = ''
          this.welcomeMsgEditShow = false
        }
      },
      saveEdit () {
        let that = this
        this.$refs['nodeObj'].validate((valid) => {
          if (valid) {
            if (this.todoType === 'add') {
              that.$store.dispatch('addNode', that.nodeObj).then((res) => {
                if (res.success) {
                  that.$store.commit(types.ADD_WEBCHAT_SCHDULE_LIST_NODE, {node: 'agentNode', data: that.nodeObj})
                  this.$message.success(this.$t('config.customer.addSucc'))
                  this.$emit('back')
                }
              })
            } else {
              that.$store.dispatch('updateNode', that.nodeObj).then((res) => {
                if (res.success) {
                  that.$store.commit(types.UPDATE_WEBCHAT_SCHDULE_LIST_NODE, {node: 'agentNode', data: that.nodeObj})
                  this.$message.success(this.$t('configLazyLoad.public.editSuccess'))
                  this.$emit('back')
                }
              })
            }
          }
        })
      }
    },
    mounted () {
      this.$store.dispatch('getCache', { type: 'agents' }).then(agents => {
        this.agentOptions = agents.map(agent => ({ label: `${agent.displayName}[${agent.exten}]`, value: agent._id }))
      })
    },
    components: {
      welcomeMsg,
      affix
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../../../assets/common.styl"
  .btn_box
    text-align right
    margin-bottom 10px
  .delete_btn
    background-color #ff6b6b
    border-color #ff6b6b
  .skillgroup_node_edit
    padding 10px
  .queue_num_box
    display inline-block
    margin 0 12px 0 -170px
    font-size 12px
    color $cf-gray1
  .queue_num_input
    display inline-block
    width 50px
  .unUseing
    width 250px
  .msg_list_box
    position relative
    padding 8px 50px 8px 8px
    background #f4f4f4
    .msg_time_box
      margin-top 8px
      .msg_time_box_title
        line-height 40px
    .todo_btn,.todo_btn_edit
      cursor pointer
      position absolute
      right 6px
      color $c-main
    .todo_btn_edit
      right 26px
    .welcone_msg_box
      width 100%
      height 100px
  .welcone_msg_box
    width calc(100% - 30px)
    height 80px
    border 1px solid #ccc
    overflow-y auto
    border-radius 6px

  .title
    margin 10px 0 14px
  .input_name_box
    width 400px
  .start_input
    position relative
    margin-right 24px
    &:before
      content: ''
      border-top 2px solid $c-border2
      width 16px
      position absolute
      top 15px
      right -20px
  .title_border
    position absolute
    height 1px
    background #ccc
    width 96%
    margin 0 auto
    display inline-block
    top 0
  .welcone_msg_col
    position relative
    .icon-beizhu
      position absolute
      cursor pointer
      right 4px
      top 0
      color $c-main
  .prompit
    color $c-prompt
    padding 6px 0 12px
  .w-e-toolbar
    background-color #f1f1f1
    border 1px solid #ccc
  #welcomeMsgEditorCon
    border 1px solid #ccc
    border-top none
    height 220px
  .welcone_msg_edit_box
    margin-left 30px
  .switch_box_text
    margin-right 10px
  .save_welcome_msg
    margin-top 10px
</style>
